<template>
    <div class="slider-container">
        <div class="slider">
            <div class="slide banner1">
                <div class="textBox">共<span class="big">{{ this.oldManNum }}</span>人</div>
                <div class="bigBox">
                    <div class="imgBox" ref="imgBox" @mousedown="startDrag" @mousemove="onDrag" @mouseup="endDrag"
                        @mouseleave="endDrag">
                        <div v-for="(slide, index) in slides" :key="index" class="slide1"
                            :style="{ backgroundImage: `url(${slide.path})` }">
                            <div class="nameBox">
                                <p>姓名: <span>{{ slide.userName }}</span></p>
                                <p>年龄: <span>{{ slide.age }}</span></p>
                                <p>情况: <span>本月没来</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>


import { careAlertList } from "@/api/warning";
export default {
    name: "monthCareAlerts",  //本月关怀预警
    components: {
    },
    props: {
        month: {
            type: String,
            // required: true,
        }
    },
    data() {
        return {
            slides: [
                // { color: '#FF6347' },
                // { color: '#4682B4' },
                // { color: '#32CD32' },
                // { color: '#FFD700' },
                // { color: '#9400D3' },
                // { color: '#FF4500' },
                // { color: '#00FA9A' },
                // { color: '#1E90FF' },
                // { color: '#FF69B4' }
            ],
            isDragging: false,
            startX: 0,
            scrollLeft: 0,
            oldManNum: 0
        };
    },
    watch: {
        month(val) {
            // console.log('month', val);
            this.nowMonth = val;
            this.getList()
        }
    },
    mounted() {
        // this.getList()

    },
    beforeDestroy() {
    },
    methods: {
        // 新增：开始拖动
        startDrag(event) {
            this.isDragging = true;
            this.startX = event.pageX; // 记录鼠标按下的初始位置
            this.scrollLeft = this.$refs.imgBox.scrollLeft; // 记录当前的滚动位置
        },
        // 新增：拖动中
        onDrag(event) {
            if (!this.isDragging) return;
            event.preventDefault();
            const x = event.pageX - this.startX; // 计算鼠标移动的距离
            this.$refs.imgBox.scrollLeft = this.scrollLeft - x; // 直接根据鼠标移动距离更新滚动位置
        },
        // 新增：结束拖动
        endDrag() {
            this.isDragging = false;
        },
        //本月处理总次数
        async getList() {
            let query = {
                month: this.nowMonth
            }
            let res = await careAlertList(query);

            if (res.code == 200) {
                console.log('年度关怀预警', res.data);
                this.oldManNum = res.data.length
                this.slides = res.data
            }
        },
    },
};
</script>


<style lang="scss" scoped>
.slider-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.slider {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner1 {
    background-image: url(../../../assets/banner8-2.png);
    // display: flex;

}

.textBox {
    width: 70%;
    height: 100px;
    // border: 1px solid red;
    margin-top: 200px;
    margin-left: 160px;

    font-size: 32px;
    color: white;
    font-weight: 300;
    line-height: 100px;
    text-align: left;
    padding-left: 140px;
    letter-spacing: 30px;

    .big {
        font-size: 72px;
        color: red;
        font-weight: 500;
    }
}

.bigBox {
    height: 450px;
    // border: 1px solid orange;
    margin-left: 160px;
    margin-top: 60px;
    display: flex;
    width: 1640px;
    overflow: hidden;
    position: relative;
}

.imgBox {
    height: 450px;
    // border: 1px solid orange;
    display: flex;
    width: 1640px;
    overflow-x: scroll; // 新增：允许水平滚动
    scroll-behavior: smooth; // 新增：平滑滚动
    cursor: grab;
    user-select: none;
    overflow: hidden;

    .slide1 {
        min-width: 500px;
        height: 450px;
        margin-right: 70px;
        // border: 1px solid red;
        // background-color: orange;
        background-image: url(../../../assets/banner1.png);
        border-radius: 20px;
        box-shadow:
            0 0 10px rgba(0, 0, 0, 0.5),
            /* 外部阴影 */
            inset 0 0 10px rgba(0, 0, 0, 0.5);
        /* 内部阴影 */
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-left: 50px;

        .nameBox {
            width: 320px;
            height: 200px;
            // border: 1px solid red;

            p {
                color: white;
                font-size: 24px;
                font-weight: 300;
                text-align: left;
            }
        }
    }
}

.slider-container:active {
    cursor: grabbing;
}
</style>